<template>
	<view class="my">
		<view class="login" @click="updateUserProfile" v-if="!userInfo.nickName">
			<!-- <button type="default" @click="updateUserProfile">点击获取用户信息，授权登录</button> -->
			<view class="login-left"></view>
			<view class="login-right">点击登录</view>
		</view>

		<!-- 顶部信息 -->
		<view class="profile-top" v-else>
			<view class="profile-top-left">
				<image :mode="aspectFill" :src="userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="profile-top-right">
				<view class="profile-top-right-top">
					{{userInfo.nickName}}
				</view>
				<view class="profile-top-right-bottom">
					签名：309哈哈哈哈0wgh90j4哈哈哈h2039wegh804h049h0w9th 
				</view>
			</view>
		</view>
		<!-- 内容选项 -->
		<view class="profile-bottom">
			<view class="profile-bottom-item">
				我的主页
			</view>
			<view class="profile-bottom-item">
				喜欢的想法
			</view>
			<view class="profile-bottom-item">
				获赞
			</view>
			<view class="profile-bottom-item">
				收藏
			</view>
			<view class="profile-bottom-item">
				发布
			</view>
			<view class="profile-bottom-item">
				消息
			</view>
		</view>
	
	</view>

</template>

<script>
	import cloudApi from '../../common/cloudApi.js'
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		watch:{
			userInfo:{
				handler(newName,oldName){
					console.log("userinfo数据");
					console.log(newName);
				},
				immediate: false,
				deep: false
			}
		},
		methods: {
			userLogin(){
				//拿到第三方的用户凭证
				uni.login({
					provider: "weixin",//登录服务提供商为微信
					success: (res) => {
						//根据code去登录,code是用户登录凭证
						var code = res.code;
						
						//调用名为login的登录云函数
						cloudApi.call({
							name: "login", //名为login的云函数
							data: { //传过去的参数，用户凭证
								code: code
							},
							success: (res) => {//根据用户凭证拿到的用户相关信息
								console.log(res);
								this.userInfo = res.result
							}
						})
					}
				})
			},
			updateUserProfile(){
				//获取同意授权的用户的信息
				uni.getUserProfile({
					desc:"我就是想用",
					success: (res) => {//返回的结果为用户的信息
						//这是属于用户初次授权，所以把初始化的信息和授权后的信息整合到一起之后在进行更新数据库操作，相当于浅拷贝
						this.userInfo = Object.assign(this.userInfo,res.userInfo)
						//把用户授权后获取到的用户信息更新到数据库
						//注：这里的请求是封装了的，去cloudApi.js看
						cloudApi.call({//把这整个对象传过去
							name:"updateUserInfo",
							data:{
								userInfo:this.userInfo
							},
							success:(res)=>{
								console.log(res);
								this.userInfo = res.result.data[0]
							}
						})
					}
				})
			}
		},
		async onLoad(options) { //页面加载时触发
			this.userLogin()
		}
	}
</script>

<style scoped lang="scss">
.my{
	font-size: 40rpx;
	.login{
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		height: 200rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		.login-left{
			width: 30%;
			overflow: hidden;
			height: inherit;
			background-image: url(../../static/my/用户.png);
			background-repeat: no-repeat;
			background-position: center;
			// background-color: rgba(102,102,102,.5);
			border-radius: 50%;
			box-sizing: border-box;
		}
		.login-right{
			width: 69%;
			height: inherit;
			box-sizing: border-box;
			overflow: hidden;
			line-height: 200rpx;
		}
	}
	
	.profile-top{
		padding: 20rpx;
		width: 100%;
		height: 240rpx;
		background-color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.profile-top-left{
			width: 30%;
			height: inherit;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				display: inline-block;
			}
			
		}
		.profile-top-right{
			width: 69%;
			height: inherit;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: hidden;
			box-sizing: border-box;
			.profile-top-right-bottom{
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}
	
	
	.profile-bottom{
		width: 90%;
		height: 600rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-sizing: border-box;
		// box-shadow: 1px 1px 10px 1px rgba(102,102,102,.3);
		padding: 20px;
		
		.profile-bottom-item{
			padding: 0 0 20px 0 ;
		}
	}
	
	// .profile{
	// 	// width: 90%;
	// 	// height: 600rpx;
	// 	// background-color: #fff;
	// 	// margin: 0 auto;
	// 	// margin-top: 40rpx;
	// 	// border-radius: 20rpx;
	// 	// // box-shadow: 1px 1px 10px 1px rgba(102,102,102,.3);
		
	// 	// .image{
	// 	// 	width: 30%;
	// 	// }
	// }
}
</style>
